<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="../../bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../../bootstrap-icons/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="../../css/index.css">
  <link rel="shortcut icon" href="../img/A.png"  type="image/x-icon">
  <script src="../../bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="../../bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <script src="../../vue/jquery.min.js"></script>
  <script src="../../vue/vue.min.js"></script>
  <title>上传控制台</title>
  <script src="../../echarts/echarts.min.js"></script>
</head>

<body>
  <!-- 页面的起步 -->
  <div class="container pt-5" style="font-family:'Times New Roman', Times, serif;">
    <div class="row">
      <!--页面导航栏列表 -->
      <div class="col-md-2">
        <!-- 网站logo -->
        <div class="mb-5 bg-light" style="font-family:fantasy;direction: ltr; position: fixed;z-index: 10; left: 65px; top: 38px;">
          <h3><img style=" width: 20%; height: 20%;" src="../img/A.png" /><span>ArkanTv</span></h3>
        </div>

        <!-- 垂直导航栏 展示导航 -->
        <div class="col-md-2" style="position: fixed;top: 100px; overflow-y:auto;height: 80vh; direction:rtl;">
          <nav class="navbar bg-light" style="direction: ltr;">
            <div class="container-fluid">
              <ul class="nav nav-pills flex-column text-start">
                <li class="nav-item mb-2">
                  <a class="nav-link active" href="index.html"><i class="bi bi-text-indent-left"></i><span
                          class="m-3">统计</span></a>
                </li>
                <li class="nav-item mb-2">
                  <a class="nav-link" href="movie"><i class="bi bi-camera-video"></i><span
                          class="m-3">电影</span></a>
                </li>

                <li class="nav-item mb-2">
                  <a class="nav-link" href="of_play"><i class="bi bi-play-btn"></i><span
                          class="m-3">短视频</span></a>
                </li>

                <li class="nav-item mb-2">
                  <a class="nav-link" href="user"><i class="bi bi-person-add"></i><span
                          class="m-3">用户管理</span></a>
                </li>

                <li class="nav-item mb-2">
                  <a aria-current="page" class="nav-link" href="coin"><i
                          class="bi bi-coin"></i><span
                          class="m-3">会员金额</span></a>
                </li>

                <li class="nav-item mb-2">
                  <a aria-current="page" class="nav-link" href="prizes"><i
                          class="bi bi-cash-stack"></i><span
                          class="m-3">抽奖礼品</span></a>
                </li>

                <li class="nav-item mb-2">
                  <a aria-current="page" class="nav-link" href="selection"><i
                          class="bi bi-signpost-split"></i><span
                          class="m-3">导航列表</span></a>
                </li>

              </ul>
            </div>
          </nav>
        </div>

      </div>

      <!-- 页面的col-9部分 -->
      <div class="col-md-10 text-start" style="z-index: 10;" id="indexApp">
        <!-- 日期 / 搜索 -->
        <div class="row text-center">
          <div class="col-md-5">

            <!-- 当前日期 -->
            <div class="text-start">
              <h3>当前日期</h3>
              <p style="font-family:fantasy;">{{currentDate}}</p>
            </div>
          </div>

          <!-- 搜索框 -->
          <div class="col-md-4">
            <form>
              <div class="input-group">
                <input type="text" class="form-control" placeholder="输入关键字...">
                <span class="input-group-text"><button type="button" class="btn  btn-sm"><i
                      class="bi bi-search"></i></button></span>
              </div>
            </form>
          </div>

          <!-- 登录图标-->
          <div class="col-md-3 text-end">
            <span>ArTv10001</span>
            <img src="../img/tu2.jpg" style="border-radius: 100%; width: 65px; height: 65px;" />
          </div>
        </div>

        <!-- 图形化部分 -->
        <div class="row">
          <!-- 影视总数 -->
          <div class="col-6">
            <div ref="chartContainer" style=" height: 350px; width: 100%;"></div>
          </div>
          <!-- 总用户量和总会员量 -->
          <div class="col-6">
            <div ref="mainCom" style=" height: 350px; width:100%;"></div>
          </div>

<!--          &lt;!&ndash; 当天的访问量 &ndash;&gt;-->
<!--          <div class="col-6">-->
<!--            <div id="mainCom" style=" height: 350px; width:100%;"></div>-->
<!--          </div>-->

        </div>
        <!-- 一周的访问量、注册量、充会员 总值 -->
<!--        <div class="row">-->
<!--          <div class="col-12">-->
<!--            <div id="main" style=" height: 500px;"></div>-->
<!--          </div>-->
<!--        </div>-->

      </div>
    </div>
  </div>


</body>
<script src="../../js/index.js"></script>

<!--<script>-->

<!--  var chartDom = document.getElementById('mainCom');-->
<!--  var myChart = echarts.init(chartDom);-->
<!--  var option;-->

<!--  option = {-->
<!--    xAxis: {-->
<!--      type: 'category',-->
<!--      boundaryGap: false,-->
<!--      data: ['凌晨', '上午', '下午', '晚上']-->
<!--    },-->
<!--    yAxis: {-->
<!--      type: 'value'-->
<!--    },-->
<!--    series: [-->
<!--      {-->
<!--        data: [820, 800, 901, 6920],-->
<!--        type: 'line',-->
<!--        areaStyle: {}-->
<!--      }-->
<!--    ]-->
<!--  };-->

<!--  option && myChart.setOption(option);-->

<!--</script>-->

<script>

  // 第二个样式
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    legend: {
      data: ['充会员', '访问量', '注册量']
    },
    xAxis: [
      {
        type: 'category',
        data: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '访问量',
        min: 0,
        max: 20000,
        interval: 4000,
        axisLabel: {
          formatter: '{value} 次'
        }
      },
      {
        type: 'value',
        name: '注册量',
        min: 0,
        max: 10000,
        interval: 2000,
        axisLabel: {
          formatter: '{value} 人'
        }
      }
    ],
    series: [
      {
        name: '充会员',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 人';
          }
        },
        data: [
          2302, 2506, 7607, 13506, 1622, 326, 2000
        ]
      },
      {
        name: '访问量',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 次';
          }
        },
        data: [
          509, 900, 2604, 2870, 7007, 17506, 18022
        ]
      },
      {
        name: '注册量',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 人';
          }
        },
        data: [450, 630, 1002, 2003, 2304, 2030, 1605]
      }
    ]
  };

  option && myChart.setOption(option);

</script>

</html>